<template>
  <NstdMenu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <NstdMenuItem index="0">LOGO</NstdMenuItem>
    <div class="flex-grow" />
    <NstdMenuItem index="1">Processing Center</NstdMenuItem>
    <NstdSubMenu index="2">
      <template #title>Workspace</template>
      <NstdMenuItem index="2-1">item one</NstdMenuItem>
      <NstdMenuItem index="2-2">item two</NstdMenuItem>
      <NstdMenuItem index="2-3">item three</NstdMenuItem>
      <NstdSubMenu index="2-4">
        <template #title>item four</template>
        <NstdMenuItem index="2-4-1">item one</NstdMenuItem>
        <NstdMenuItem index="2-4-2">item two</NstdMenuItem>
        <NstdMenuItem index="2-4-3">item three</NstdMenuItem>
      </NstdSubMenu>
    </NstdSubMenu>
  </NstdMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>
